<nz-drawer
  [nzClosable]="false"
  [nzVisible]="visible"
  nzPlacement="right"
  [nzTitle]="$t('_edit')"
  (nzOnClose)="handleClose()"
  [nzFooter]="footerTpl"
>
  <form nz-form [formGroup]="validateForm" *nzDrawerContent>
    <nz-form-item>
      <nz-form-label [nzSpan]="4">Width</nz-form-label>
      <nz-form-control [nzSpan]="20">
        <nz-slider formControlName="width" [nzMax]="1000"></nz-slider>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSpan]="4">Fit</nz-form-label>
      <nz-form-control [nzSpan]="20"
        ><nz-select formControlName="fit">
          <nz-option nzValue="contain" nzLabel="contain"></nz-option>
          <nz-option nzValue="cover" nzLabel="cover"></nz-option>
          <nz-option nzValue="fill" nzLabel="fill"></nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item>

    <div formArrayName="imgs">
      <div
        *ngFor="let n of imgs.controls; let idx = index"
        class="border-b border-solid mb-4"
      >
        <ng-container [formGroupName]="idx">
          <nz-form-item>
            <nz-form-label [nzSpan]="4">{{ $t('_image') }}</nz-form-label>
            <nz-form-control [nzSpan]="20">
              <nz-input-group [nzSuffix]="suffixIconSearch">
                <input formControlName="src" nz-input />
              </nz-input-group>

              <ng-template #suffixIconSearch>
                <app-upload-image
                  (onChange)="onUploadImage($event, idx)"
                ></app-upload-image>
              </ng-template>
            </nz-form-control>
          </nz-form-item>

          <nz-form-item>
            <nz-form-label [nzSpan]="4">URL</nz-form-label>
            <nz-form-control [nzSpan]="20">
              <input nz-input formControlName="url" />
            </nz-form-control>
          </nz-form-item>
        </ng-container>
      </div>
    </div>

    <button class="mt-4" nz-button nzType="primary" (click)="handleAdd()">
      {{ $t('_add') }}
    </button>
  </form>

  <ng-template #footerTpl>
    <div style="float: right">
      <button nz-button style="margin-right: 8px" (click)="handleClose()">
        {{ $t('_cancel') }}
      </button>
      <button nz-button nzType="primary" (click)="handleSubmit()">
        {{ $t('_submit') }}
      </button>
    </div>
  </ng-template>
</nz-drawer>
